<template>
  <van-tabbar :active="activeIndex" @change="onChange" active-color="#FFA722" inactive-color="#A8A8A8">
    <van-tabbar-item v-for="(item, index) in naviList" :key="index" :data-src="item.src" :title="item.src">
      <image
        slot="icon"
        :src="item.icon"
        mode="aspectFit"
        style="width: 23px; height: 23px;"
      />
      <image
        slot="icon-active"
        :src="item.iconActive"
        mode="aspectFit"
        style="width: 23px; height: 23px;"
      />{{ item.text }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
        // 图片储存至七牛云
        naviList: [
            {
                icon: 'http://cdn.ielts.group/主页灰@3x.png',
                iconActive: 'http://cdn.ielts.group/主页@3x.png',
                text: '主页',
                url: 'index'
            },
             {
                icon: 'http://cdn.ielts.group/数据@3x.png',
                iconActive: 'http://cdn.ielts.group/数据彩@3x.png',
                text: '数据',
                url: 'statistics'
            },
             {
                icon: 'http://cdn.ielts.group/计算器@3x.png',
                iconActive: 'http://cdn.ielts.group/计算器彩@3x.png',
                text: '计算器',
                url: 'calculator'
            },
             {
                icon: 'http://cdn.ielts.group/我的@3x.png',
                iconActive: 'http://cdn.ielts.group/我的彩@3x.png',
                text: '我的',
                url: 'about'
            }
        ]
    };
  },
  props: {
    activeIndex: {
      type: Number,
      required: true
    }
  },
  methods: {
    onChange(ev) {
      const index = ev.mp.detail;
      const url = this.naviList[index].url;
      wx.navigateTo({
        url:`/pages/${url}/main`
      })
    }
  }
};
</script>

<style lang="less" scoped>

</style>